<template>
    <!--系统设置-j角色列表-->
    <div class="public-common">
        <div class="public-title">角色列表</div>
        <div class="public-searchbox">
            <el-row>
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="form.keyword" class="input-with-select" size="mini"/>
                </el-col>
                <el-col :span="18">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="search(true)" :loading="searchstatus" style="margin-left:10px;">搜索</el-button>
                    <el-button type="success" icon="el-icon-edit-outline" size="mini" @click="addRole()">新建</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="delRole()">删除</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="public-scroll" style="height:calc(100% - 120px);overflow-y:scroll;">
            <el-table :data="tabledata" size="mini" border stripe  max-height="300px" ref="rolelist" v-loading="searchstatus">
                <el-table-column
                type="selection"
                width="55px" fixed="left">
                </el-table-column>
                <el-table-column
                    label="名称">
                    <template slot-scope="scope">
                        {{scope.row.name}}
                    </template>
                </el-table-column>                
                <el-table-column
                    label="级别">
                    <template slot-scope="scope">
                        {{scope.row.level}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="备注">
                    <template slot-scope="scope">
                        {{scope.row.remark}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作" fixed="right" width="60px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editRole(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column> 
            </el-table>
        </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.now"
            :page-sizes="page.sizes"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total" class="pagination" style="bottom:0">
            </el-pagination>
    <!--dialog-->
    <el-dialog title="角色基本信息"  :visible.sync="dialog.isVisible" width="60%" top="10vh">
        <el-row>
            <el-col :span="12">
                <div class="system-title">角色信息</div>
                <el-form label-width="90px" size="mini">
                    <el-form-item label="角色名称">
                        <el-input v-model="dialog.name"></el-input>
                    </el-form-item>
                    <el-form-item label="角色级别">
                        <el-input v-model="dialog.level"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="dialog.remark" type="textarea"  :rows="4"></el-input>
                    </el-form-item>
                    <el-form-item label="说明:">
                        角色级别越大应该分配较高的权限。
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="11" :offset="1">
                <div class="system-title">功能信息</div>
                <div class="system-side-con" style="padding:0 10px;">
                    <el-input
                    placeholder="请输入内容"
                    v-model="suggest"
                    size="mini"
                    clearable>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                    <div class="system-side-scroll" style="height:300px">
                        <el-scrollbar style="height:100%;">
                            <Menus :treeview="dialog.treeview" @choosetree="choosetree" ref="menus"></Menus>
                        </el-scrollbar>                
                    </div>
                </div>
            </el-col>
        </el-row>
        
        <div class="textcenter">
            <el-button type="primary" size="mini" @click="saveRole()">确定</el-button>    
            <el-button type="info" @click="dialog.isVisible = false"  size="mini">返回</el-button>  
        </div>
    </el-dialog>
</div>
    
</template>
<script>
import Menus from '@/components/Menus'
import {menuData} from '@/ajax/data'
export default {
    data(){
        return {
            suggest:'',
            searchstatus:false,
            form:{
                search:'',
                keyword:''
            },
            
            tabledata:[],
            beforeSearchData:[],
            page:{
              now:1,
              pagesize:10,
              sizes:[2,10, 20, 50, 100],
              total:0,
              key:''
            },
            dialog:{
                isVisible:false,
                name:'',
                level:'',
                remark:'',
                limit:[],
                editindex:-1,
                treeview:{
                    checkbox:true,
                    kind:'manage',
                    data:menuData,
                    choose:[],
                    expanded:[],
                    props:{
                        children: 'children',
                        label: 'name'
                    }
                }
            },
            select:{
                fnaddress:[],
                icons:[],
                opentype:[
                    {label:"默认(URL调用)",value:'默认(URL调用)'},
                    {label:"全局窗口打开",value:'全局窗口打开'},
                    {label:"新窗口打开",value:'新窗口打开'}
                ],
                states:[
                    {label:"启用",value:'启用'},
                    {label:"禁用",value:'禁用'}
                ]
            }
        }
    },
    watch:{
        suggest(val) {
            this.$refs.menus.filtrateList(val);
        }
    },
    components:{
        Menus
    },
    computed:{
        Managename(){
            return "[公司简介]"
        }
    },
    mounted(){
        let arry = [
            {
                name:'超级管理员',
                level:99999,
                remark:'超级管理员拥有所有权限',
                id:'1',
                limit:[11,12,13,14,15,16,17,18,19,20,21,22,23]
            },
            {
                name:'管理员',
                level:9999,
                remark:'管理员拥有重点权限',
                id:'2',
                limit:[11,12,13,14,15,16,17,18,19,20,21,22,2304,2305,2306,2307,2308,2309]
            },
            {
                name:'普通用户',
                level:9999,
                remark:'拥有常规操作权限',
                id:'3',
                limit:[11,13,14,15,16,17,18,19,20,21,22]
            }
        ];
        this.tabledata = arry;
        this.beforeSearchData = arry;
    },
    methods:{
        addRole(){
            let len = this.tabledata.length;
            let id = parseInt(this.tabledata[len-1].id)+1
            this.dialog = Object.assign({},this.dialog,{
                isVisible:true,
                name:'',
                level:'',
                remark:'',
                limit:[],
                id:id,
                editindex:-1,
                treeview:{
                    checkbox:true,
                    kind:'manage',
                    data:menuData,
                    choose:[],
                    expanded:[],
                    props:{
                        children: 'children',
                        label: 'name'
                    }
                }
            });
           
        },
        editRole(id){
            this.tabledata.map((item,index)=>{                
                if(item.id == id){
                    this.dialog = Object.assign({},this.dialog,{
                        isVisible:true,
                        name:item.name,
                        level:item.level,
                        remark:item.remark,
                        limit:item.limit,
                        id:item.id,
                        editindex:index,
                        treeview:{
                            checkbox:true,
                            kind:'manage',
                            data:menuData,
                            choose:item.limit,
                            expanded:[],
                            props:{
                                children: 'children',
                                label: 'name'
                            }
                        }
                    })
                }
            })
        },
        saveRole(){
            let _index = this.dialog.editindex;
            let {isVisible,treeview,editindex,...userinfo} = this.dialog;
            if(_index != -1){
                this.tabledata.map((item,index)=>{
                    if(index == _index){
                        //this.tabledata[_index] = userinfo;
                        this.$set(this.tabledata,index,userinfo);
                        this.$set(this.beforeSearchData,index,userinfo)
                    }
                })
            }else{
                this.tabledata.push(userinfo);
                this.beforeSearchData = arry;
            }
            this.dialog.isVisible = false;
        },
        delRole(){
            let arry = this.$refs.rolelist.selection;
            if(arry.length == 0){
                this.$message({
                    message: '请先选中角色后再进行操作！',
                    type: 'info',
                    duration:1500
                });
                return;
            }
            this.$confirm('确定要删除选中的角色吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                arry.map(children=>{
                    this.tabledata.map((item,index)=>{
                        if(children.id == item.id){
                            this.tabledata.splice(index,1);
                        }
                    })
                });
                /**test */
                this.beforeSearchData = this.tabledata;
                /**test end */
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {         
            });
        },
        choosetree(a,b){
            a = a || [];
            let newLimit = []
            a.map(item=>{
                newLimit.push(item.menuId);
            })
            this.dialog.limit = newLimit;
        },
        search(TYPE){
            let that = this;
            let searchData = {
            "pageNum":this.page.now,
            "pageLength":this.page.pagesize,
            "queryParam":{}
            };
            if(TYPE){
                that.searchstatus = true;
            }
            /**test */
            let keyword = this.form.keyword;           
            let newArry = [];
            this.beforeSearchData.map(item=>{
                let name = item.name || '';
                let remark = item.remark || '';

                let menuUrl = item.menuUrl || '';
                if( name.indexOf(keyword)!= -1 || remark.indexOf(keyword)!= -1 ){
                    newArry.push(item);
                }
            });
            
            setTimeout(()=>{
                that.tabledata = newArry;
                that.searchstatus = false;
            },500)
            return;
            /**test end*/
            if(!ispage){ 
                for(let obj in this.form){
                    if(this.form[obj] != ""){
                        searchData.queryParam[obj] = this.form[obj]
                    }
                }
            }else{
                searchData.queryParam = that.searchobj;
            }
            gogo();
            function gogo(){
                
            }
        },
        //分页
        handleSizeChange(pagesize){
            this.page.pagesize = pagesize;
            this.search(true,true);
        },
        handleCurrentChange(pageno){
            this.page.now = pageno;
            this.search(true,true);
        }
    }
    
}
</script>
<style lang="scss" scoped>
$Color:#15428F;
$Bgnavtab:rgba(255,255,255,.5);
$BgHeader:#DFE8F6;
$BorderColor:#99bbe8;
.system-hmax{
    height: 100%;
    box-sizing: border-box;
    .system-side{
        margin-top:20px;
        border: 1px dashed $BorderColor;
        transition: width .5s;
        .system-side-con{
            padding:5px 10px;
            height: calc(100% - 40px);
            .system-side-scroll{
                height:calc(100% - 30px) ;
                overflow: hidden;
            }
        }
    }
    .system-wide{
        //margin-left:10px;
        //border: 1px dashed $BorderColor;
        position: relative;
        box-sizing: border-box;
        height:100%;
        .system-wide-table{
            padding: 0 5px;
        }
    }
    .system-title{line-height: 30px;background-color: #deecfd;padding:0 10px;color:$Color; }
    
    
}
.public-common{
    .system-title{line-height: 30px;background-color: #deecfd;padding:0 10px;color:$Color; margin-bottom:10px;}
} 
</style>